<template>
    <div class="flex_col">
        <div class="flex_row">
            <el-button @click="onClickShot" type="primary">截屏</el-button>
            <el-button @click="onClickDownload" type="info">下载图片</el-button>
        </div>
        <img class="shut_img card p10 m5" v-if="imageUrl != null" :src="imageUrl" />
    </div>

</template>

<script lang="ts" setup>
import remote from '@/service/remote';
import { runAction } from '@/utils/ui';
import { createUrl, saveFile } from '@/utils/utils';
import { ref } from 'vue';

const imageUrl = ref<string | null>(null);
let imageData: Uint8Array<ArrayBuffer> | null = null

async function onClickShot() {
    runAction('截屏', '截屏中', async () => {
        const buf = await remote.screenShot();
        imageData = buf;
        imageUrl.value = createUrl(buf);
    });
}

async function onClickDownload() {
    runAction('下载', '下载截屏', async () => {
        if (imageData == null) {
            throw '请先截屏';
        }
        saveFile('截屏图片.png', imageData!);
    });
}

</script>

<style scoped>

.shut_img {
    width: 30vw;
    max-width: 400px;
}

</style>

